<template>
	<view>

		<view style="width: 373rpx;height: 146rpx;margin: auto;">
			<image src="@/static/fabu.png" mode="widthFix" style="width: 373rpx;height: 146rpx;"></image>
		</view>


		<view class="list" v-for="(item,index) in list" :key="index" :class="current==index?'change1':''" v-if="show">
			<view class="text"
				:style="{'background':current==index?'rgba(103, 238, 228, 0.39)':'#fff','color':current==index?'#00685F':'#000'}">
				{{item.title}}</view>
			<view class="des" :style="{'color':current==index?'#fff':'#000'}">打赏金额</view>
			<view class="u-flex u-flex-wrap ">
				<view class="block" v-for="(item1,index1) in item.rechargeList" :key="index1"
					@click="Clist1(index,index1)" :class="item1.change?'change':''">
					<text>{{item1.icoin}}</text>
					<text style="font-size: 24rpx;margin-left: 28rpx;">i币</text>
				</view>
			</view>
		</view>


		<view class="u-flex u-row-between " style="width: 700rpx;margin: auto;">
			<view @click="Cstatus(index)" v-for="(item,index) in status" :key="index" class="status" :class="Scurrent==index?'Scurrent':''">
				<view class="title" :class="Scurrent==index?'Stitle':''">{{item.title}}</view>
				<view class="des" :class="Scurrent==index?'Sdes':''">{{item.des}}</view>
			</view>
		</view>
		
		
		<view class="btn" @click="submit">
			确认
		</view>
		
	<u-tabbar :mid-button="true" :border-top="false" height="100rpx" bgColor="#67EEE4" :before-switch="beforeSwitch"
		inactive-color="#000" active-color="#fff" v-model="currentTab" :list="vuex_tabbar"></u-tabbar>
	
	


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbg: 'linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%)',
				currentTab: 2,
				status: [{
					title: "情感维护",
					des: "QINGGANWEIHU"
				}, {
					title: "情感表达",
					des: "QINGGANBIAODA"
				}, {
					title: "情感挽回",
					des: "QINGGANWANHUI"
				}],
				show: false,
				list: [{
					title: '专家问题',

				}, {
					title: '普通问题',

				}],
				current: 0,
				Scurrent:1
			}
		},
		async onLoad() {
			await this.getList();
			await this.getList1()
			
			this.list[0].rechargeList[0].change = true;
			this.$forceUpdate()

		},
		methods: {
			submit(){
				let publish_id=this.list[this.current].rechargeList.filter(item=>item.change)[0].id;
				
				let data = {
					cate:this.Scurrent+1,
					tab:this.current==0?2:1,
					publish_id
				};
				console.log(data,"data")
				this.$app.jump(`/pages/topics/publish?data=${encodeURIComponent(JSON.stringify(data))}`)
				this.$emit('publish')
			},
			beforeSwitch(e) {
				console.log(e,"e")
				let url = ''
				if (e == 2) url = '/pages/fabu/index';
				if (e == 3) url = '/pages/college/index';
				if (e == 0) url = '/pages/index/index';
				if (e == 1) url = '/pages/topics/list';
				if (e == 4) url = '/pages/mine/mine';
				console.log(url,"url")
				// 跳转
				url && uni.switchTab({
					url: url
				})
				return false
			},
			Cstatus(index){
				this.Scurrent=index
			},
			getList() {
				return new Promise((resolve, reject) => {
					this.$u.api.publishList({type:2}).then(res => {
						res.forEach(item=>{
							item.change = false;
						})
						var objString = JSON.stringify(res);
                        this.list[0].rechargeList = JSON.parse(objString);
						this.show = true;
						resolve(res)
					})
				})
			},
			
			getList1() {
				return new Promise((resolve, reject) => {
					this.$u.api.publishList({type:1}).then(res => {
						res.forEach(item=>{
							item.change = false;
						})
						var objString = JSON.stringify(res);
			            this.list[1].rechargeList = JSON.parse(objString);
						this.show = true;
						resolve(res)
					})
				})
			},
			
			

			async Clist1(index, index1) {
				await this.getList()
				await this.getList1()
				this.current = index
				this.$set(this.list[index].rechargeList[index1], "change", true);
				this.$forceUpdate()
				console.log(this.list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.status{
		border: 1px solid #666666;
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		padding: 20rpx 40rpx;
		text-align: center;
		border-radius: 20rpx;
		.title{
			font-size: 28rpx;
			font-weight: bold;
		}
		.des{
			font-size: 12rpx;
		}
	}
	.Scurrent{
		border: 0;
		animation: Scurrentanimation 0.4s linear forwards;
	}
	.Stitle{
		
		color: #fff;
	}
	.Sdes{
		
		color: #fff;
	}
	
	.btn{
		width: 680rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		border-radius: 100rpx;
		margin: 40rpx auto;
		text-align: center;
		font-size: 32rpx;
		line-height: 70rpx;
		color: #fff;
	}
	
	
	@keyframes Scurrentanimation {
		from {
			transform: scale(0.5);
		}
	
		to {
			transform: scale(1.3);
		}
	}
	
	.list {
		width: 700rpx;
		border: 1rpx solid #00564E;

		border-radius: 40rpx;
		margin: 30rpx auto;
		padding: 20rpx 20rpx 0 20rpx;

		.text {
			width: 660rpx;
			height: 70rpx;

			border-radius: 40rpx;
			margin: auto;
			text-align: center;
			line-height: 70rpx;
			font-weight: bold;

			font-size: 36rpx;
		}

		.des {
			font-size: 32rpx;
			text-align: center;
			margin: 20rpx 0;

		}

		.block {
			width: 33.3%;
			text-align: center;
			color: #333333;
			font-size: 36rpx;
			line-height: 50rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}
	}

	.change1 {
		border: 0;
		animation: myAnimation2 0s linear forwards;
	}

	@keyframes myAnimation2 {
		from {
			background: transparent;
		}

		to {
			background: linear-gradient(0deg, #67EEE4 0%, #00D6C2 100%);
		}
	}

	@keyframes myAnimation {
		from {
			background: transparent;
		}

		to {
			background: rgba(172, 255, 247, 0.45);
		}
	}

	.change {
		padding: 10rpx;
		border-radius: 20rpx;
		font-weight: bold;
		animation: myAnimation 0.2s linear forwards;
	}
</style>
